<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="$t('出入库记录')"
    width="900px"
    destroy-on-close
    :close-on-click-modal="false">
    <div class="app-container">
      <PageSearch
        :showSearch.sync="showSearch"
        :getList="getList"
        :handleQuery="handleQuery"
        :resetQuery="resetQuery">
        <template #form>
          <el-form :model="queryParams" ref="queryForm" size="small">
            <el-select clearable :placeholder="$t('类型')" v-model="queryParams.recordsType">
              <el-option
                v-for="item in out_warehouse_type_list"
                :key="item.dictValue"
                :value="item.dictValue"
                :label="item.dictLabel" />
            </el-select>
          </el-form>
        </template>
      </PageSearch>

      <el-table :height="calTableHeight() - 150" v-loading="loading" :data="tableData" row-key="menuId">
        <!-- sku编号、类型、业务id、出入数量、操作时间 -->
        <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />
        <el-table-column show-overflow-tooltip :label="$t('店铺/平台')" align="center" prop="type">
          <template slot-scope="{ row }">
            <div>{{ row.shopNamePlatformType }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('类型')" align="center" prop="type">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('业务id')" align="center" prop="businessId" />
        <el-table-column show-overflow-tooltip :label="$t('出入数量')" align="center" prop="outNum" />
        <el-table-column show-overflow-tooltip label="操作后库存" align="center" prop="afterNum" />
        <el-table-column show-overflow-tooltip :label="$t('操作时间')" align="center" prop="createTime" />
      </el-table>
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </el-dialog>
</template>

<script>
import { stockPositionRecords } from '@/api/distribution/sku/outInStore'
import { useDict } from '@/utils/useDict'
import { checkPermi } from '@/utils/permission'

export default {
  name: 'outInStore',
  components: {},
  data() {
    return {
      showSearch: true,
      /**出入库记录类型 */
      out_warehouse_type_list: [],
      title: '',
      tableData: [],
      showDialog: false,
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        skuId: '',
        recordsType: '',
      },
    }
  },
  created() {
    useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
      this.out_warehouse_type_list = out_warehouse_type
    })
  },

  methods: {
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.recordsType = null
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
    hasPermission(str) {
      return checkPermi([str])
    },
    handleType(type) {
      const index = this.out_warehouse_type_list.findIndex((i) => i.dictValue == type)
      return this.out_warehouse_type_list[index]?.dictLabel
    },
    handleOpen({ title, skuId }) {
      this.title = title
      this.queryParams.skuId = skuId
      this.getList()
      this.showDialog = true
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      stockPositionRecords(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
